<!--
 * 抽取比例设置
-->
<template>
    <div class="con">
        <div>
          <ConditionCard shadow="never" body-style="padding: 24px 24px 6px 24px;" @search="onSubmit" @reset="reset()">
            <el-form ref="queryForm" :model="queryForm" label-suffix="：" label-position="right" label-width="90px">
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item :label="$t('label.grade')">
                    <el-date-picker v-model="queryForm.grade" value-format="yyyy" type="year" :placeholder="$t('paperBlindTrial.gredeTips')" style="width: 100%" :clearable="true"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('label.trainingLevel')" prop="eduLevel">
                    <DictSelect v-model="queryForm.eduLevel" :data="options.eduLevel" :clearable="true" ></DictSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('label.trainingCategory')" prop="eduMode">
                    <DictSelect v-model="queryForm.eduMode" :filterable="true" :data="options.eduMode" :clearable="true" v-clearreadonly></DictSelect>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item :label="$t('label.degreeCategory')" prop="degreeType">
                    <DictSelect v-model="queryForm.degreeType" :data="options.degreeType" :clearable="true" ></DictSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('label.formLearning')" prop="studyForm">
                    <DictSelect v-model="queryForm.studyForm" :data="options.studyForm" :clearable="true" ></DictSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.college')">
                      <el-select
                        v-model="queryForm.academyCode"
                        style="width: 100%;"
                        clearable
                        filterable
                        @change="academyChange"
                        :placeholder="$t('common.text.all')"
                        v-clearreadonly
                      >
                        <el-option
                            v-for="item in options.academyCode"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.major')">
                      <el-select
                        v-model="queryForm.majorCode"
                        filterable
                        :placeholder="$t('common.text.all')"
                        style="width: 100%;"
                        :clearable="true"
                        v-clearreadonly
                      >
                        <el-option
                          v-for="item in majorList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <MyMajor v-show="false" :faculty="queryForm.academyCode" :filterable="true" :grade="queryForm.grade" @load-done="saveMajorList" > </MyMajor>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('achievementApply.teacherName')">
                    <el-select
                      v-model="queryForm.stuTutorNo"
                      :remote-method="selectUser"
                      :placeholder="$t('preDefense.teacherNameTips')"
                      filterable
                      remote
                      style="width: 100%;"
                      :clearable="true"
                      v-clearreadonly
                    >
                      <el-option
                        v-for="item in users"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('paperBlindTrial.students')" prop="stuNo">
                    <el-select
                      v-model="queryForm.stuNo"
                      :remote-method="selectStu"
                      :placeholder="$t('common.pla.pleaseSelect')"
                      filterable
                      remote
                      style="width: 100%;"
                      :clearable="true"
                      v-clearreadonly
                    >
                      <el-option
                        v-for="item in students"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </ConditionCard>
          <el-card shadow="never">
            <el-row type="flex" justify="space-between" class="btn_row">
              <el-col :span="6">
                <h1 class="condition-title">{{$t('paperBlindTrial.authoritySettingTitle')}}</h1>
              </el-col>
              <el-col :span="4" style="text-align: right;margin-bottom: 5px;">
                <el-button class="con_apply" type="primary" size="" @click="open('add', 'all')">{{$t('common.btn.add')}}</el-button>
              </el-col>
            </el-row>
            <!-- 学生类型 -->
            <div class="section">
              <div class="head-line" @click="toggle(0)" >
                <span class="section-title">{{$t('paperBlindTrial.studentType')}}</span>
                <toggle-button
                    v-model="toggleArr[0]"
                    :buttonStyle="'default'"
                    :isShowArrow="false"
                    :readonly="true"
                    :hidden-label="$t('masterArrange.dialog.hidden')"
                    :display-label="$t('masterArrange.dialog.display')"
                />
              </div>
              <div v-show="!toggleArr[0]" class="content">
                <el-button class="con_apply item_add" type="primary" size="" @click="open('add', 'type')">{{$t('common.btn.add')}}</el-button>
                <edu-table ref="stuTypeTables" :url="categoryTableApi" :selection="false">
                  <el-table-column :min-width="item.width" v-for="item in studentType" :key="item.props" :label="item.label" :prop="item.props" show-overflow-tooltip></el-table-column>
                  <el-table-column width="120px" :label="$t('nonPublicCourseOpen.operation')" >
                    <template slot-scope="scope">
                      <div class="con_btns" >
                        <el-button type="text" @click="open('edit', 'type', scope.row)">{{$t('common.btn.edit')}}</el-button>
                        <el-button type="text" @click="deletes(scope.row, 'category')">{{$t('common.btn.delete')}}</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </edu-table>
              </div>
            </div>
            <!-- 学院或专业 -->
            <div class="section">
              <div class="head-line" @click.stop="toggle(1)">
                <span class="section-title">{{$t('paperBlindTrial.collegeOrMajor')}}</span>
                <toggle-button
                    v-model="toggleArr[1]"
                    :buttonStyle="'default'"
                    :isShowArrow="false"
                    :readonly="true"
                    :hidden-label="$t('masterArrange.dialog.hidden')"
                    :display-label="$t('masterArrange.dialog.display')"
                />
              </div>
              <div v-show="!toggleArr[1]" class="content">
                <el-button class="con_apply item_add" type="primary" size="" @click="open('add', 'major')">{{$t('common.btn.add')}}</el-button>
                <edu-table ref="majorTables" :url="majorTableApi" :selection="false">
                  <el-table-column :min-width="item.width" v-for="item in collegeOrMajor" :key="item.props" :label="item.label" :prop="item.props" show-overflow-tooltip></el-table-column>
                  <el-table-column width="120px" :label="$t('nonPublicCourseOpen.operation')" >
                    <template slot-scope="scope">
                      <div class="con_btns" >
                        <el-button type="text" @click="open('edit', 'major', scope.row)">{{$t('common.btn.edit')}}</el-button>
                        <el-button type="text" @click="deletes(scope.row, 'major')">{{$t('common.btn.delete')}}</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </edu-table>
              </div>
            </div>
            <!-- 导师 -->
            <div class="section">
              <div class="head-line" @click.stop="toggle(2)">
                <span class="section-title">{{$t('achievementApply.teacherName')}}</span>
                <toggle-button
                    v-model="toggleArr[2]"
                    :buttonStyle="'default'"
                    :isShowArrow="false"
                    :readonly="true"
                    :hidden-label="$t('masterArrange.dialog.hidden')"
                    :display-label="$t('masterArrange.dialog.display')"
                />
              </div>
              <div v-show="!toggleArr[2]" class="content">
                <el-button class="con_apply item_add" type="primary" size="" @click="open('add', 'teacher')">{{$t('common.btn.add')}}</el-button>
                <edu-table ref="stuTutorTables" :url="tutorTableApi" :selection="false">
                  <el-table-column :min-width="item.width" v-for="item in stuTutor" :key="item.props" :label="item.label" :prop="item.props" show-overflow-tooltip></el-table-column>
                  <el-table-column width="120px" :label="$t('nonPublicCourseOpen.operation')" >
                    <template slot-scope="scope">
                      <div class="con_btns" >
                        <el-button type="text" @click="open('edit', 'teacher', scope.row)">{{$t('common.btn.edit')}}</el-button>
                        <el-button type="text" @click="deletes(scope.row, 'tutor')">{{$t('common.btn.delete')}}</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </edu-table>
              </div>
            </div>
            <!-- 必抽名单 -->
            <div class="section">
              <div class="head-line" @click.stop="toggle(3)">
                <span class="section-title">{{$t('paperBlindTrial.mustList')}}</span>
                  <toggle-button
                      v-model="toggleArr[3]"
                      :buttonStyle="'default'"
                      :isShowArrow="false"
                      :readonly="true"
                      :hidden-label="$t('masterArrange.dialog.hidden')"
                      :display-label="$t('masterArrange.dialog.display')"
                  />
              </div>
              <div v-show="!toggleArr[3]" class="content">
                <el-form ref="stuForm" :model="stuForm" label-width="45px">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item :label="$t('paperBlindTrial.students')" >
                        <!-- multiple -->
                        <el-select
                          v-model="stuForm.stuNo"
                          :remote-method="selectStu"
                          :placeholder="$t('common.pla.pleaseSelect')"
                          filterable
                          remote
                          style="width: 100%;"
                          :clearable="true"
                          v-clearreadonly
                        >
                          <el-option
                            v-for="item in students"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-button class="con_apply" type="primary" size="" @click="addStuNo">{{$t('message.add1')}}</el-button>
                    </el-col>
                  </el-row>
                </el-form>
                <edu-table ref="stuTables" :url="studentTableApi" :selection="false">
                  <el-table-column :min-width="item.width" v-for="item in stuNames" :key="item.props" :label="item.label" :prop="item.props" show-overflow-tooltip></el-table-column>
                  <el-table-column width="120px" :label="$t('nonPublicCourseOpen.operation')" >
                    <template slot-scope="scope">
                      <div class="con_btns" >
                        <!-- <el-button type="text" @click="open('edit', 'student', scope.row)">编辑</el-button> -->
                        <el-button type="text" @click="deletes(scope.row, 'studetn')">{{$t('common.btn.delete')}}</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </edu-table>
              </div>
            </div>
          </el-card>
        </div>
        <!-- 编辑 -->
        <el-dialog :visible.sync="dialogFlag" :title="titles" width="900px">
            <ruleSettingAdd v-if="dialogFlag" ref="ruleSettingAdd" :showType="showType" :objs="objs" :options="options" @emit:back="applyBack"></ruleSettingAdd>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFlag = false" >{{$t('common.btn.cancel')}}</el-button>
                <el-button type="primary" @click="sure" >{{$t('common.btn.save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { drawRatioCatoryTableList, drawRatioMajorTableList, drawRatioTutorTableList, drawRatioStudentTableList,
studentAdd, studentDelete, tutorDelete, majorDelete, categoryDelete,findStudentList } from "common/src/api/paperBlindTrial";
import MyMajor from "common/src/views/administrator/undergraduateTutor/component/MyMajor";
import ruleSettingAdd from './ruleSettingAdd';
import commonMixins from 'common/src/views/practiceManagement/commonMixins';
import { findTeacherInfoList } from 'common/src/api/studentinfo';
import mixin from 'common/src/mixins/index';
export default {
    components: {
      ruleSettingAdd,
      MyMajor,
    },
    mixins: [commonMixins,mixin],
    props: {},
    data() {
        return {
            categoryTableApi: drawRatioCatoryTableList, // 类别
            majorTableApi: drawRatioMajorTableList, // 专业
            tutorTableApi: drawRatioTutorTableList, // 导师
            studentTableApi: drawRatioStudentTableList, // 学生
            dialogFlag: false,
            objs: {
              ids: ''
            },
            queryForm: {
              academyCode: '', // 学院
              majorCode: '', // 专业
              grade: '', // 年级
              eduLevel: '', // 培养层次
              eduMode: '', // 培养类别
              degreeType: '', // 学位类型
              studyForm: '', // 学习形式
              stuTutorNo: '', // 导师
              stuNo: '', // 学生
            },
            studentType: [
              { label: this.$t('label.grade'), props: 'grade', width: 100 },
              { label: this.$t('label.trainingLevel'), props: 'eduLevelI18n', width: 100 },
              { label: this.$t('label.trainingCategory'), props: 'eduModeI18n', width: 100 },
              { label: this.$t('label.degreeCategory'), props: 'degreeTypeI18n', width: 100 },
              { label: this.$t('label.formLearning'), props: 'studyFormI18n', width: 100 },
              { label: this.$t('paperBlindTrial.extract'), props: 'rate', width: 125 },
            ],
            collegeOrMajor: [
              { label: this.$t('label.grade'), props: 'grade', width: 100 },
              { label: this.$t('label.college'), props: 'academyCodeI18n', width: 100 },
              { label: this.$t('courseSummary.major'), props: 'majorName', width: 100 },
              { label: this.$t('paperBlindTrial.extract'), props: 'rate', width: 125 },
            ],
            stuTutor: [
              { label: this.$t('achievementApply.teacherName'), props: 'stuTutorName', width: 100 },
              { label: this.$t('paperBlindTrial.extract'), props: 'rate', width: 125 },
            ],
            stuNames: [
              { label: this.$t('label.stuCode'), props: 'stuNo', width: 100 },
              { label: this.$t('paperBlindTrial.students'), props: 'stuName', width: 100 },
            ],
            options: {
              academyCode: [], // 学院
              eduLevel: [], // 培养层次
              eduMode: [], // 培养类别
              degreeType: [], // 学位类型
              studyForm: [], // 学习形式
              majorAll: [], // 所有专业
            },
            students: [], // 学生信息
            users: [], // 导师信息
            toggleArr: [false, false, false, false], // 是否隐藏  true隐藏 false 显示
            showType: 'all', // 新增弹框展示类型
            stuForm: {
              stuNo: ''
            },
            majorList: [], // 当前展示的专业数据
            lastAcademyCode: '' // 上一次学院数据
        };
    },
    computed: {

    },
    created() {
    },
    mounted() {
      let param = {
        X_YX: 'academyCode', // 学院
        X_PYCC: 'eduLevel', // 培养层次
        X_PYLB: 'eduMode', // 培养类别
        X_XWLX: 'degreeType', // 学位类型
        K_XXXS: 'studyForm', // 学习形式
        G_ZY: 'majorAll', // 所有专业
      };
      this.initOptions(param);
      this.onSubmit();
      if (!this.global.isAcdemicDean) {
        this.majorList = this.options.majorAll;
      }
    },
    methods: {
      sure() { // 确定
          if (this.objs.ids) {
            this.$refs.ruleSettingAdd.save('edit');
            return;
          }
          this.$refs.ruleSettingAdd.save();
      },
      open(val, type, row = {}) {
        if (val === 'edit') { // 编辑
          this.objs.ids = row.id;
          this.titles = this.$t('common.btn.edit');
        } else { // 新增
          this.titles = this.$t('common.btn.add');
          this.objs.ids = '';
        }
        this.showType = type;
        this.dialogFlag = true;
      },
      deletes(row, type) { // 删除
        this.$delConfirm().then(() => {
          if (type === 'studetn') { // 学生删除
            studentDelete([row.id]).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('common.tips.deleteSuccess'));
                this.reset();
              }
            });
          } else if (type === 'tutor') { // 导师删除
            tutorDelete([row.id]).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('common.tips.deleteSuccess'));
                this.reset();
              }
            });
          } else if (type === 'major') { // 专业删除
            majorDelete([row.id]).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('common.tips.deleteSuccess'));
                this.reset();
              }
            });
          } else if (type === 'category') { // 类别删除
            categoryDelete([row.id]).then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t('common.tips.deleteSuccess'));
                this.reset();
              }
            });
          }
        }).catch(e => { });
      },
      onSubmit() { // 筛选
        if (this.$refs.stuTypeTables) {
          this.$refs.stuTypeTables.pageNum = 1;
          this.$refs.stuTypeTables.search(this.queryForm);
        }
        if (this.$refs.majorTables) {
          this.$refs.majorTables.pageNum = 1;
          this.$refs.majorTables.search(this.queryForm);
        }
        if (this.$refs.stuTutorTables) {
          this.$refs.stuTutorTables.pageNum = 1;
          this.$refs.stuTutorTables.search(this.queryForm);
        }
        if (this.$refs.stuTables) {
          let param = _.cloneDeep(this.queryForm);
          if (param.stuNo) {
            param.stuNo = param.stuNo.split(',')[0];
          }
          this.$refs.stuTables.pageNum = 1;
          this.$refs.stuTables.search(param);
        }
      },
      reset() {  // 重置
        for (const key in this.queryForm) {
          this.queryForm[key] = '';
        }
        this.onSubmit();
      },
      search() { // 搜索
        this.onSubmit();
      },
      // 申请回调方法
      applyBack () {
        this.dialogFlag = false;
        this.reset();
      },
      //可用TeacherSelect通用组件替换
      selectUser(query) {
        if (!query) return
        const data = {
            condition: query,
            pageNum_: 1,
            pageSize_: 10
        }
        this.loading = true
        findTeacherInfoList(data)
          .then(res => {
              this.loading = false
              if (res.code == 200) {
                  this.users = this.transData(res.data.list, 'name', 'code')
              } else throw res.code
          })
          .catch(error => {
              this.loading = false
              this.$message({
                  type: 'error',
                  message: '查询用户出错'
              })
          })
      },
      transData(list, name, code) {
        return list.map((item, index, array) => {
          return {
              label: item[name] + '(' + item[code] + ')',
              value: item[code],
          }
        })
      },
      transStudentData(list, name, code) {
        return list.map((item, index, array) => {
          return {
              label: item[name] + '(' + item[code] + ')',
              value: item[code]+','+item[name],
          }
        })
      },
      // 查询学生信息接口
      selectStu (query) {
        if (!query) return;
        const data = {
          name: query,
          pageNum_: 1,
          pageSize_: 50
        }
        this.loading = true
          findStudentList(data)
          .then(res => {
            this.loading = false
          if (res.code == 200) {
              this.students = this.transStudentData(res.data.list, 'name', 'studentId')
            } else throw res.code
          })
          .catch(error => {
              this.loading = false
              this.$message({
                  type: 'error',
                  message: '查询用户出错'
              })
          })
      },
      // 控制三个部分的显示/隐藏
      toggle(index) {
        this.$set(this.toggleArr, index, !this.toggleArr[index]);
      },
      // 添加学生信息
      addStuNo () {
        if (!this.stuForm.stuNo || this.stuForm.stuNo === '') {
          this.$message.error(this.$t('paperBlindTrial.selectStuTips'));
          return;
        }
        let stuNoList = this.stuForm.stuNo.split(',');
        let stuNo = stuNoList[0];
        let stuNames = stuNoList[1];
        let param = {};
        // stuNoList.forEach(item=>{
        //   let itemList = item.split(',');
        //   stuNames.push(itemList[1]);
        //   stuNo.push(itemList[0]);
        // });
        // param.stuNo = stuNo.join(',');
        // param.stuName = stuNames.join(',');
        param.stuNo = stuNo;
        param.stuName = stuNames;
        studentAdd(param).then(res => {
          this.$message.success(this.$t('common.tips.addSuccess'));
          this.$refs.stuForm.resetFields();
          this.stuForm.stuNo = '';
          this.reset();
        });
      },
      // 保存专业数据
      saveMajorList(data){
        if (!this.global.isAcdemicDean) {
          this.majorList = this.queryForm.academyCode?data:this.options.majorAll;
        } else {
          this.majorList = data;
        }
      },
      // 学院改变
      academyChange(value){
        this.majorList = !this.global.isAcdemicDean ? this.options.majorAll : [];
        if (this.lastAcademyCode !== value) {
          this.queryForm.majorCode = '';
        }
        this.lastAcademyCode = value;
      }
    }
};
</script>

<style scoped lang="scss">
.con {
    &_title {
        width: 100%;
        // border-bottom: solid #ccc 2px;
        padding: 20px;
        color: #2b3b4e;
        font-weight: bold;
    }
}
.content_style {
  background: #ffffff;
}
.section {
  position: relative;
  .el-input-number {
    width: 100%;
  }
  border-bottom: 2px solid #dcdfe6;
  .disable-mask {
    z-index: 999;
    position: absolute;
    cursor: not-allowed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    background: #cccccc;
    opacity: 0.4;
  }
  .head-line {
    cursor: pointer;
    padding: 0 10px;
    line-height: 30px;
    .section-title {
      width: 200px;
      display: inline-block;
      font-size: 16px;
    }
  }
  .head-line:hover {
    background-color: #e4e7ed;
  }
}
.content {
  margin-bottom: 15px;
}
.tab-title {
  color: #2b3b4e;
  font-size: 18px;
}
.btn_row {
  padding-top: 15px;
}
.item_add {
  margin: 10px;
}
</style>

